<template>
    <div>
        <div>
            <div class="top-nav"><topHeade></topHeade></div>
        </div>
        <div class="back-pic">
            <img src="../../assets/productImg/banner.jpg" alt="">
        </div>
        <div>
            <div class="title">
                <router-link to="/index" tag="span" class="pointer">首页></router-link><span @click="toBack" class="pointer">{{title}}</span>
                <div class="right-word">
                    <div class="clock"><img src="../../assets/images/clock.png" alt=""></div>
                    <span>2021-10-26</span>
                </div>
            </div>
        </div>
        <div>
            <div class="center-content">
                <div class="little-top">
                    <div class="sudoku" @click="back"><img src="../../assets/images/nin.png" alt=""></div>
                    <h2>{{listData.name}}</h2>
                </div>
                <div class="main-box" v-html="listData.details">
                </div>
            </div>
        </div>
        <div class="foot"><bottomFoot></bottomFoot></div>
    </div>
</template>

<script>
    import topHeade from "../../components/topHeade";
    import bottomFoot from "../../components/bottomFoot";
    import {getLaboratoryList, getLaboratoryNews, getNewsList, getProductList} from "../../api";
    export default {
        name: "detail",
        components:{
            topHeade,
            bottomFoot
        },
        data(){
          return{
              listData:"",
              title:""
          }
        },
        created() {
            this.$store.commit('modify',{show:this.$route.query.index})
            console.log(this.$route.query.title)
            switch (this.$route.query.title) {
                case '1':
                    this.title="公司新闻";
                    break;
                case '2':
                    this.title="产品详情";
                    break;
                case '3':
                    this.title="星火实验室";
                    break;
            }
            // console.log(this.$route.query.index)
            //新闻中心
            getNewsList (this.$route.query.id).then(res=>{
                // console.log(res.data)
                this.listData=res.data
            })
            //星火实验室
            getLaboratoryList (this.$route.query.id1).then(res=>{
                // console.log(res.data)
                this.listData=res.data
            })
            getLaboratoryNews (this.$route.query.id).then(res=>{
                // console.log(res.data)
                this.listData=res.data
            })
            //产品页
            getProductList (this.$route.query.id3).then(res=>{
                // console.log(res.data)
                this.listData=res.data
            })
            getProductList (this.$route.query.id4).then(res=>{
                // console.log(res.data)
                this.listData=res.data
            })
            //轮播图
            getProductList (this.$route.query.idfirst).then(res=>{
                // console.log(res.data)
                this.listData=res.data
            })
            getProductList (this.$route.query.idsecond).then(res=>{
                // console.log(res.data)
                this.listData=res.data
            })
        },
        methods:{
            back(){
                this.$router.go(-1)
            },
            toBack(){
                switch (this.$route.query.title) {
                    case '1':
                       this.$router.push('/news')
                        break;
                    case '2':
                        this.$router.push('/product')
                        break;
                    case '3':
                        this.$router.push('/laboratory')
                        break;
                }
            }
        },

    }
</script>

<style scoped lang="less">
    .top-nav{
        background: black;
    }
    .foot{
        margin-top: 40px;
    }
    .right-word{
        float: right;
        width: 110px;
        height: 18px;
        line-height: 18px;
        .clock{
            float: left;
            width: 18px;
            height: 18px;
            img{
                width: 100%;
                height: 100%;
            }
        }
        span{
            margin-left: 10px;
            float: left;
        }
    }
    .title{
        width: 1200px;
        margin: 20px auto 0;
        padding-bottom: 20px;
        border-bottom: 1px dashed gray;
        span{
            color: #8d8d8d;
            font-size: 14px;
        }
    }
    .center-content{
        width: 1200px;
        /*height: 800px;*/
        margin: 10px auto ;
        /*border: 1px solid red;*/
    }
    .sudoku{
        float: right;
        width: 26px;
        height: 26px;
        img{
            width: 100%;
            height: 100%;
        }
    }
    .sudoku:hover{
        cursor:pointer;
    }
    .little-top{
        width: 1200px;
        height: 60px;
        h2{
            margin-top: 20px;
            text-align: center;
        }
    }
    .main-box{
        overflow: hidden;
        /*display: flex;*/
        /*height: 200px;*/
        width: 100%;
        /*border: 1px solid red;*/
        padding-bottom: 30px;
        border-bottom: 2px solid gray;
    }
    .back-pic{
        img{
            width: 100%;
            height: 100%;
        }
    }
    .pointer:hover{
        cursor:pointer;
    }
</style>